<!--logo部分组件-->
<template>
	<div class="top_2" >
		<img @click="logImg()" class="logImg" src="../assets/image/logo.jpg"/>
		<div class="seach">
			<input class="txt" type="text" placeholder="请输入关键字进行搜索" />
			<img @click="SeachK" class="seachImg" src="../assets/image/seach.jpg"/>		
			<div class="hot">
				<span>热门:</span>
				<span>牛油果</span>
				<span>牛排</span>
				<span>山竹</span>
				<span>奇异果</span>
			</div>
		</div>
		
		<div class="top_span">
			<button class="usercenter" @click="BTn_1"><img src="../assets/image/1_03.jpg"/><span>个人中心</span></button>
			<button class="shopping" @click="BTn_2"><img src="../assets/image/2.jpg"/><span>购物车</span></button>
		</div>	
		<div class="clear"></div>
		<div class="navigation">
			<span class="all">
				<span class="btn_img">全部分类</span><img class="btn_img" src="../assets/image/22.png" />			
			</span>
			<span class="all_span">
				<span @click="firstpage"  class="span_1">首页</span>
				<span @click="City"    class="span_1 ">同城</span>
				<span @click='Newuser' class="span_1">礼拜五</span>
				<span @click="Market" class="span_1">积分商城</span>
				<span @click="Navigation" class="span_1">导航+</span>
			</span>		
		</div>
		<ul class="all_ul">
				<li><img src="../assets/image/111.jpg"/><span>新鲜水果</span></li>	
				<li><img src="../assets/image/111.jpg"/><span>生猛海鲜</span></li>		
				<li><img src="../assets/image/111.jpg"/><span>肉类家禽</span></li>		
				<li><img src="../assets/image/111.jpg"/><span>蛋奶素食</span></li>		
				<li><img src="../assets/image/111.jpg"/><span>田园蔬菜</span></li>		
				<li><img src="../assets/image/111.jpg"/><span>零食酒水</span></li>		
				<li><img src="../assets/image/111.jpg"/><span>粮油杂货</span></li>		
				<li><img src="../assets/image/111.jpg"/><span>礼品卡券</span></li>		
				<li><img src="../assets/image/111.jpg"/><span>家具用品</span></li>						
		</ul>
		<div class="much">
			<div class="chongfu">
					<div class="yingji">应急鲜果</div>
					<div class='much_a'>
				<div >
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
					</div>
				<div>
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
				</div>				
			</div>
		</div>
		<div class="chongfu">
					<div class="yingji">应急鲜果</div>
					<div class='much_a'>
				<div >
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
					</div>
				<div>
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
				</div>				
			</div>
		</div>
		<div class="chongfu">
					<div class="yingji">应急鲜果</div>
					<div class='much_a'>
				<div >
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
					</div>
				<div>
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
				</div>				
			</div>
		</div>
		<div class="chongfu">
					<div class="yingji">应急鲜果</div>
					<div class='much_a'>
				<div >
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
					</div>
				<div>
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
				</div>				
			</div>
		</div>
		<div class="chongfu">
					<div class="yingji">应急鲜果</div>
					<div class='much_a'>
				<div >
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
					</div>
				<div>
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
				</div>				
			</div>
		</div>
		<div class="chongfu">
					<div class="yingji">应急鲜果</div>
					<div class='much_a'>
				<div >
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
					</div>
				<div>
					<span>草莓</span>
					<span class="putao">葡萄</span>
					<span class="xiangjiao">香蕉</span>
					<span>水果</span>
				</div>				
			</div>
		</div>							
		</div>
	</div>	
</template>
<script>
	export default{
		name:"logo",
		methods:{	
			BTn_2:function(){
				window.location.href="#/shopCarindex";
			},
			BTn_1:function(){
				window.location.href="#/personalCenter";
			},
			firstpage:function(){
				window.location.href='#/Firstpage'
			},
			City:function(){
				window.location.href='#/City'
			},
			Market:function(){
				window.location.href='#/Market'
			},
			logImg:function(){
				window.location.href='#/Firstpage'
			},
			Navigation:function(){
				window.location.href='#/Navigation'
			},
			Newuser:function(){
				window.location.href='#/Newuser'
			},
			SeachK:function(){
				var txt =$('.txt').val();
				if(txt==""){		
					window.location.href='#/SeachK'
				}
			}
		}
	}
	//点击事件
$(function(){
	$(".all_ul").hide();
	$(".btn_img").mouseenter(function(){
		clearTimeout(setTimer1);
		$(".all_ul").fadeIn(300);
	});
	var setTimer;
	var setTimer1;
	$(".btn_img").mouseleave(function(){
		setTimer = setTimeout(function(){
			$(".all_ul").hide();
		},100);		
	});
	$(".all_ul").mouseenter(function(){
		clearTimeout(setTimer);
		$(this).show();
		$(".much").show()
	});
	$(".much").mouseleave(function(){
		setTimer1 = setTimeout(function(){
			$(".all_ul").slideUp(200);
			$(".much").slideUp(200);
		},100);	
	});
	$('.much').mouseleave(function(){
		$(".much").slideUp();
	});
	
//	$('.seachImg').on('click',function(){
//		var txt =$('.txt').val();
//		if(txt==""){
//			
//		}
//	})
})
	
</script>
	
<style scoped>
	.clear{
		clear: both;
	}

 /*个人中心购物车部分*/
  .usercenter img{
  	width: 20px;
  	height: 20px;
  }
  .shopping img{
  	width: 20px;
  	height: 20px;
  }
	.top_2{
		width: 1280px;
		height:148px ;
		position: relative;
		margin:20px auto;
	}
	.top_2::after{
		content: "";
		display: none;
		clear: both;
	}
	.seach::after{
		content: "";
		display: none;
		clear: both;
	}

	/*logo部分*/
	.logImg{
		float: left;
	}
	/*中间搜索框*/
	.seach{
		width:500px;
		height: 70px;
		float: left;
		margin-top: 6px;
		margin-left: 97px;
	}
	.seach input{
		width:456px;
		height: 35px;
		font-size: 17px;
		margin-top: 16px;
		border: 2px solid #4b943d;
	}
	.seach .seachImg{
		width: 42px;
		height:39px;
		margin-left: -5px;
		padding-top: 16px;
		float: right;
	}
	/*右边个人中心和购物车*/
	.top_span{
		height: 38px;
		margin-top: 22px;
		float: right;	
	}
	.top_span div{
		display: inline-block;
	}
	.usercenter,.shopping{
		width: 124px;
		height: 38px;
		line-height: 38px;	
		text-align: center;
		background: #f8f8f6;
		border: 1px solid #e5e5e5;
		font-size:16px;
		color: #aaaaa9;
		font-weight: 200;
	}
	.usercenter{
		margin-left: 30px;
		margin-right: 12px;
	}

	.hot{
		width: 280px;
		height: 30px;
		margin-left: -8px;
	}
	.hot span{
		font-size: 14px;
		margin: 0px 8px;
		font-size: #666666;
	}
	/*导航分类部分*/
	.navigation{
		width: 1280px;
		/*height: 50px;*/
		line-height: 50px;
		margin-top: 20px;
		font-size: 18px;
		font-weight: 300;
		/*border: 1px solid green;*/
		color: #404141;
	}
	.navigation em{
		font-style: normal;
		margin-left: 40px;
		margin-right: 16px;
	}
	.navigation .all_span span{
		width: 152px;
		height: 50px;
		margin-left: 50px;
		margin-right: 50px;
	}
	.span_1:hover{
		cursor:pointer;
		color: red;
	}
	/*全部分类*/
	.all{
		/*width: 100px;*/
		margin-left: 30px;
		/*border: 2px solid green;*/
	}
	.all img{
		margin-left: 30px;
		margin-right: 35px;
	}
	.navigation img{
		width: 20px;
		height: 20px;
	}
	.all_ul {
		width:180px;
		height: 510px;
		border: 1px solid lightgray;
		position: absolute;
		top: 168px;
		z-index: 10000;	
		display: none;
	}
	.all_ul  li{
		width:180px;
		height: 56px;
		line-height: 56px;
		font-size: 18px;
		text-align: center;
		background: white;
		border-bottom: 1px solid darkgray;
	}
	.all_ul img{
		padding-right: 20px;
	}
	.all_ul li:hover{
		background: #ebffe7;
		cursor: pointer;	
	}
	/*时令水果*/
	.much{
		width: 460px;
		height: 510px;
		background: #ebffe7;
		position: absolute;
		left: 182px;
		top: 168px;
		display: none;
		z-index: 10000;
	}
	.much .yingji {
		width: 145px;
		height: 60px;
		line-height: 60px;
		font-size: 18px;
		color: #498e3d;
		text-align: center;	
	}
	.yingji:hover{
		color: red;
		cursor: pointer;
	}
	.much_a span:hover{
		color: red;
		cursor: pointer;
	}
	.much .much_a,.yingji{
		display: inline-block;
	}
	.much_a{
		width: 268px;
		height:70px ;
		vertical-align: -32px;
	}
	.much_a span{
		padding-right: 15px;
		padding-left: 15px;
	}
	.much_a div{
		padding-top: 10px;
	}
	.putao{
		border-right:2px solid darkgray;
		border-left:2px solid darkgray;
	}
	.xiangjiao {
		border-right:2px solid darkgray;
	}	
	
</style>